<template>
  <div>
    <van-form @submit="onSubmit">
      <!-- 基本信息 -->
      <FormTitle title="基本信息"></FormTitle>
      <van-cell-group class="basic-info-readonly" v-if="isShowUD">
        <van-field
          v-model="formData.name"
          name="姓名"
          label="姓名"
          placeholder="请输入姓名"
          readonly
          :rules="[{ required: true, message: '请输入姓名' }]"
        />
        <van-field
          v-model="formData.idCard"
          name="身份证号码"
          label="身份证号码"
          placeholder="请输入身份证号码"
          readonly
          :rules="[{ required: true, message: '请输入身份证号码' }]"
        />
        <van-field
          v-model="formData.tel"
          name="联系电话"
          label="联系电话"
          placeholder="请输入联系电话"
          readonly
          :rules="[{ required: true, message: '请输入联系电话' }]"
        />
        <van-field
          v-model="formData.homeAddress"
          name="家庭地址"
          label="家庭地址"
          placeholder="请输入家庭地址"
          readonly
          :rules="[{ required: true, message: '请输入家庭地址' }]"
        />
      </van-cell-group>

      <van-cell-group v-else>
        <van-field
          v-model="formData.name"
          name="姓名"
          label="姓名"
          placeholder="请输入姓名"
          :rules="[{ required: true, message: '请输入姓名' }]"
        />
        <van-field
          v-model="formData.idCard"
          name="身份证号码"
          label="身份证号码"
          placeholder="请输入身份证号码"
          :rules="[{ required: true, message: '请输入身份证号码' }]"
        />
        <van-field
          v-model="formData.tel"
          name="联系电话"
          label="联系电话"
          placeholder="请输入联系电话"
          :rules="[{ required: true, message: '请输入联系电话' }]"
        />
        <van-field
          v-model="formData.homeAddress"
          name="家庭地址"
          label="家庭地址"
          placeholder="请输入家庭地址"
          :rules="[{ required: true, message: '请输入家庭地址' }]"
        />
      </van-cell-group>

      <!-- 装修信息 -->
      <FormTitle title="装修信息"></FormTitle>
      <van-cell-group class="basic-info-readonly" v-if="isShowUD">
        <van-field
          v-model="formData.houseAddress"
          name="房屋住址"
          label="房屋住址"
          placeholder="请输入房屋住址"
          readonly
          :rules="[{ required: true, message: '请输入房屋住址' }]"
        />
        <van-field
          v-model="formData.houseType"
          name="房屋类型"
          label="房屋类型"
          placeholder="请输入房屋类型"
          readonly
          :rules="[{ required: true, message: '请输入房屋类型' }]"
        />
        <van-field
          v-model="formData.floor"
          name="楼层数"
          label="楼层数"
          placeholder="请输入内容"
          readonly
          :rules="[{ required: true, message: '请输入楼层数' }]"
        />
        <!-- 选择 -->
        <!-- <van-field
          v-model="formData.xzq"
          is-link
          readonly
          name="picker"
          label="装修类型"
          placeholder="请选择内容"
          @click="showPickerForType = true"
        />
        <van-popup round v-model:show="showPickerForType" position="bottom">
          <van-picker
            :columns="columns"
            @confirm="onConfirmZxlx"
            @cancel="showPickerForType = false"
          />
        </van-popup> -->

        <!-- 选择时间 -->
        <van-field
          v-model="formData.startTime"
          name="datePicker"
          label="开工日期"
          placeholder="点击选择开工日期"
          @click="selectTime1('time1')"
          readonly
          :rules="[{ required: true, message: '请选择装修开工时间' }]"
        />

        <van-field
          v-model="formData.jhzxqx"
          readonly
          name="datePicker"
          label="计划装修期限"
          placeholder="点击选择计划装修期限"
          @click="selectTime2('time2')"
        />
      </van-cell-group>

      <van-cell-group v-else>
        <van-field
          v-model="formData.houseAddress"
          name="房屋住址"
          label="房屋住址"
          placeholder="请输入房屋住址"
          :rules="[{ required: true, message: '请输入房屋住址' }]"
        />
        <van-field
          v-model="formData.houseType"
          name="房屋类型"
          label="房屋类型"
          placeholder="请输入房屋类型"
          :rules="[{ required: true, message: '请输入房屋类型' }]"
        />
        <van-field
          v-model="formData.floor"
          name="楼层数"
          label="楼层数"
          placeholder="请输入内容"
          :rules="[{ required: true, message: '请输入楼层数' }]"
        />
        <!-- 选择 -->
        <!-- <van-field
          v-model="formData.xzq"
          is-link
          readonly
          name="picker"
          label="装修类型"
          placeholder="请选择内容"
          @click="showPickerForType = true"
        />
        <van-popup round v-model:show="showPickerForType" position="bottom">
          <van-picker
            :columns="columns"
            @confirm="onConfirmZxlx"
            @cancel="showPickerForType = false"
          />
        </van-popup> -->

        <!-- 选择时间 -->
        <van-field
          v-model="formData.startTime"
          name="datePicker"
          label="开工日期"
          placeholder="点击选择开工日期"
          @click="selectTime1('time1')"
          :rules="[{ required: true, message: '请选择装修开工时间' }]"
        />

        <van-field
          v-model="formData.jhzxqx"
          name="datePicker"
          label="计划装修期限"
          placeholder="点击选择计划装修期限"
          @click="selectTime2('time2')"
        />
      </van-cell-group>

      <!-- 施工方案 -->
      <FormTitle title="施工方案"></FormTitle>
      <van-cell-group class="basic-info-readonly" v-if="false">
        <van-field
          v-model="formData.constructionUnit"
          name="施工单位"
          label="施工单位"
          placeholder="请输入施工单位"
          readonly
          :rules="[{ required: true, message: '请输入施工单位' }]"
        />
        <van-field
          v-model="formData.superviseUnit"
          name="监管单位"
          label="监管单位"
          placeholder="请输入监管单位"
          readonly
          :rules="[{ required: true, message: '请输入监管单位' }]"
        />
        <!-- 选择时间 -->
        <van-field
          v-model="formData.longTime"
          readonly
          name="datePicker"
          label="计划完成时间"
          placeholder="点击选择计划完成时间"
          @click="selectTime3('time3')"
          :rules="[{ required: true, message: '请选择计划完成时间' }]"
        />
        <van-cell>
          <div class="font-w-8 van-field__label">施工资料</div>
          <div class="no_info">无</div>
          <!-- <van-uploader disabled class="flex row-center p-20" v-model="formData.file">
            <van-button color="#409EFE" plain round> 点击上传</van-button>
          </van-uploader> -->
        </van-cell>
      </van-cell-group>

      <van-cell-group v-else>
        <van-field
          v-model="formData.constructionUnit"
          name="施工单位"
          label="施工单位"
          placeholder="请输入施工单位"
          :rules="[{ required: true, message: '请输入施工单位' }]"
        />
        <van-field
          v-model="formData.superviseUnit"
          name="监管单位"
          label="监管单位"
          placeholder="请输入监管单位"
          :rules="[{ required: true, message: '请输入监管单位' }]"
        />
        <!-- 选择时间 -->
        <van-field
          v-model="formData.longTime"
          is-link
          readonly
          name="datePicker"
          label="计划完成时间"
          placeholder="点击选择计划完成时间"
          @click="selectTime3('time3')"
          required
          :rules="[{ required: true, message: '请选择计划完成时间' }]"
        />
        <van-cell>
          <div class="font-w-8 van-field__label">施工资料</div>
          <van-uploader
            class="flex row-center p-20"
            :deletable="false"
            v-model="formData.file"
          >
            <!-- <van-button color="#409EFE" plain round> 点击上传</van-button> -->
          </van-uploader>
        </van-cell>
      </van-cell-group>
      <!-- 资金来源 -->
      <!-- <FormTitle title="资金来源"></FormTitle>
      <van-cell-group inset>
        <van-field
          v-model="formData.ownerMoney"
          name="房主资金"
          label="房主资金"
          placeholder="请输入房主资金"
        />
        <van-field
          v-model="formData.dkMoney"
          name="贷款金额"
          label="贷款金额"
          placeholder="请输入贷款金额"
        />
      </van-cell-group>
  
      <FormTitle title="装修验收"></FormTitle>
      <van-cell-group inset>
        <van-field
          v-model="formData.ysdw"
          name="验收单位"
          label="验收单位"
          placeholder="请输入验收单位"
        />
        <van-field
          v-model="formData.yssj"
          name="验收时间"
          label="验收时间"
          placeholder="请输入验收时间"
        />
        <van-cell>
          <div class="font-w-8 van-field__label w100vw">验收材料（公章材料）</div>
          <van-uploader class="flex row-center p-20" v-model="formData.ysFile">
            <van-button color="#409EFE" plain round> 点击上传</van-button>
          </van-uploader>
        </van-cell>
      </van-cell-group> -->
      <!-- 备注 -->
      <van-cell-group class="mt-10 basic-info-readonly" v-if="isShowUD">
        <van-field
          v-model="formData.remakes"
          label-align="top"
          rows="2"
          autosize
          readonly
          label="备注信息"
          type="textarea"
          maxlength="500"
          placeholder="请输入备注"
          show-word-limit
        />
      </van-cell-group>

      <van-cell-group class="mt-10" v-else>
        <van-field
          v-model="formData.remakes"
          label-align="top"
          rows="2"
          autosize
          label="备注信息"
          type="textarea"
          maxlength="500"
          placeholder="请输入备注"
          show-word-limit
        />
      </van-cell-group>
      <div class="dvc"></div>
      <!-- 装修信息 -->
      <FormTitle title="审核意见" v-show="isShowUD"></FormTitle>
      <van-cell-group class="mt-10" v-show="isShowUD">
        <van-field
          v-model="formData.current"
          label-align="top"
          rows="2"
          autosize
          readonly
          label="情况描述"
          type="textarea"
          maxlength="500"
          placeholder="请输入备注"
          show-word-limit
        />
      </van-cell-group>
      <!-- <div class="btn_box">
        <van-button class="del" round block type="primary" native-type="submit"> 删除 </van-button>
        <van-button class="sub" round block type="primary" native-type="submit"> 修改 </van-button>
      </div> -->

      <div class="btn_box">
        <div class="Btns">
          <van-button
            class="del"
            round
            block
            type="primary"
            native-type="submit"
            @click="delBaseInfo"
          >
            删除
          </van-button>
          <van-button
            class="sub"
            round
            block
            type="primary"
            native-type="submit"
            @click="updateBaseInfo"
          >
            修改
          </van-button>
        </div>
      </div>
    </van-form>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import houseApi from "@/api/house";
import { useRoute, useRouter } from "vue-router";
import { showConfirmDialog, showToast } from "vant";
import FormTitle from "@/components/formTitle/index.vue";
const route = useRoute();
const isShowUD = ref(true);
const router = useRouter();
const formData = ref({
  name: "",
  idCard: "",
  tel: "",
  homeAddress: "",
  houseAddress: "",
  houseType: "",
  floor: "",
  xzq: "",
  startTime: "", //装修开工时间
  jhzxqx: "",
  constructionUnit: "",
  superviseUnit: "",
  longTime: "",
  file: [],
  ownerMoney: "",
  dkMoney: "",
  ysdw: "",
  yssj: "",
  ysFile: [],
  remakes: "",

  current: "",
  id: "",
  createBy: "",
});
// 弹框异步操作
const beforeClose = (action) =>
  new Promise(async (resolve) => {
    if (action === "confirm") {
      let res = await houseApi.renovationDelete(formData.value.id);
      console.log("---del---", res);
      if (res.data.code == 200 && res.data.msg == "操作成功") {
        showToast("删除成功");
        setTimeout(() => {
          router.push({
            path: "/renovation",
          });
        }, 1200);
      }
    }
    resolve(action);
  });
const delBaseInfo = () => {
  //删除操作
  showConfirmDialog({
    title: "删除",
    message: "确认删除该条数据吗？",
    beforeClose,
  });
};
const getData = async (id) => {
  try {
    let res = await houseApi.renovationDetail(id);
    console.log("---res---", res);
    if (res.data.code == 200 && res.data.msg == "操作成功") {
      formData.value = res.data.data;
      // formData.value.file = formData.value.file.split(",")
      formData.value.file =
        formData.value.file == ""
          ? ""
          : formData.value.file.split(",").map((item) => {
              item = {
                url: "http://192.168.3.63:8085" + item,
              };
              return item;
            });
    }
    console.log("formData", formData.value);
  } catch (error) {
    console.log("error", error);
  }
};

const updateBaseInfo = () => {
  // isShowUD.value = false;
  router.push({
    path: "/renovation/update",
    query: {
      tid: formData.value.id,
    },
  });
};

onMounted(() => {
  let { tid } = route.query;
  getData(tid);
});
</script>

<style lang="scss" scoped>
.bottomButton {
  position: static !important;
}
.btn_box {
  background-color: #fff;
  margin-top: 20px;
  padding: 15px 16px;
  display: flex;
  border: none;
  .Btns {
    width: 100%;
    display: flex;
    .del {
      flex: 3;
      background: linear-gradient(90deg, #f2724d 0%, #ff9576 99%);
    }
    .sub {
      flex: 5;
      margin-left: 20px;
    }
  }

  .Btns_2 {
    width: 100%;
    .sub {
      width: 100%;
    }
  }
}

::v-deep .basic-info-readonly {
  .van-cell {
    background-color: #f2f2f2;
  }
}
.no_info {
  margin: 10px auto;
  background: #f8f8f8;
  color: #4487ec;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 25px;
}
</style>
